<template>
  <XTable v-loading="tableLoading" :tableList="tableList" :tableData="tableData" :tablePage="tablePage" @changePage="tablePageData">
    <template v-slot:htmlUrl="{ value }">
      <el-link :href="value" type="primary" target="_blank">点击跳转</el-link>
    </template>
  </XTable>
</template>

<script>
import axios from 'axios'
import { XTable } from '@/components/@fhsy/x-tool'
export default {
  components: { XTable },
  data: () => ({
    tableLoading: false,
    tableList: [
      { label: '序号', type: 'XNumber', width: 100, align: 'center' },
      { label: '仓库名', prop: 'human_name' },
      { label: '标签', prop: 'language' },
      { label: '星标', prop: 'stargazers_count' },
      { label: '更新时间', prop: 'updated_at' },
      { label: '仓库地址', prop: 'html_url', slot: 'htmlUrl' }
    ],
    tableData: [],
    tablePage: {
      page: 1,
      size: 4,
      total: 0,
      pageSizes: [4, 8, 16, 32]
    }
  }),
  created () { this.tablePageData() },
  methods: {
    tablePageData () {
      this.tableLoading = true
      axios.get('https://gitee.com/api/v5/search/repositories', {
        params: {
          q: '码云',
          page: this.tablePage.page,
          per_page: this.tablePage.size
        }
      }).then(req => {
        let { data } = req
        data.forEach(element => {
          element.updated_at = element.updated_at.substring(0, 10)
        })
        this.tableData = data
        this.tablePage.total = 666 // 总个数,码云 api 返回并没有个数可能是 N 个。根据真实数据赋值即可
        this.tableLoading = false
      }).catch(error => {
        console.error('API 请求异常', error)
        this.tableLoading = false
      })
    }
  }
}
</script>
